import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { AppDispatch, AppThunk, RootState } from '@/store'

/**
 * 全局可复用钩子函数
 * == 函数封装的基本思想：==
1. 将相同的逻辑直接拷贝到函数中
2. 不同的数据或逻辑通过函数参数传入
3. 需要返回数据，就通过函数返回值返回
 */
/**
 * 作用：
 * 1. 分发异步action
 * 2. 获取分发后存储到redux数据
 * 使用：
 * const data = useInitState(异步action, redux模块名)
 * @param asyncAction 异步action，异步action函数返回值类型是AppThunk
 * @param stateName redux模块名（动态传入，可以继承RootState的键，利用 extends keyof）
 * @returns
 */

export function useInitialState<StateName extends keyof RootState>(
  asyncAction: () => AppThunk,
  stateName: StateName
) {
  const dispatch = useDispatch<AppDispatch>()

  // 1. 获取要修改的用户信息
  useEffect(() => {
    dispatch(asyncAction())
  }, [dispatch, asyncAction])

  // 2. 获取回填的用户数据
  const data = useSelector((state: RootState) => state[stateName])

  return data
}
